<template>
  <!-- 7.成果展示模块 -->
  <div class="AchievementDisplay_box">
    <span style="font-family:'宋体">成果展示</span>
    <div class="AchievementDisplay_box_blue"></div>
    <div class="AchievementDisplay_box_orange"></div>
    <div class="AchievementDisplay_box_more"><span>MORE +</span></div>
    <div class="img_box">
      <el-carousel trigger="click" height="130px">
        <el-carousel-item v-for="item in imglist" :key="item.id">
          <div class="img6_box">
            <img
              :src="item.src"
              alt=""
              style="width: 100%; height: 70%"
              @click="imgclick(item.buzId)"
            />
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import md5 from "js-md5";
export default {
  data() {
    return {
      
      imglist: [],
      imageUrl: "",
      query2: {
        typeDictItemId: 1,
        pageNum: 1,
        pageSize: "",
      },
      query: {
        title: "",
        pageNum: 1,
        pageSize: 5,
      },
      // 内容列表
      list: [],
      // 内容总条数
      total: 0,
      // 初始化显示字段
      showColumns: [
        { label: "标题", show: true },
        { label: "内容", show: true },
        { label: "修改时间", show: true },
      ],
      // 是否显示详情
      showDetailVisible: false,
      // 数据详情
      detail: {},
    };
  },
  created() {
    this.getList();
    this.getList2();
  },
  methods: {
    // imgclick(buzId){
    //     id = buzId
    //     this.$router.push({ name: "achdetail", params: { row: buzId } });
    // },
    imgclick(buzId) {
      // console.log(buzId)
      // this.info.id = buzId;
      this.$router.push({ name: "achdetail", params: { id: buzId } });
    },
    resetLoginForm() {
      // console.log(this);
      this.$refs.loginFormRef.resetFields();
    },

    tohosthome() {
      this.$router.push("/homepage");
    },
    tonews() {
      this.$router.push("/homenews");
    },
    tolab() {
      this.$router.push("/laboratoryintroduction");
    },
    toresources() {
      this.$router.push("/tocoursewareresources");
    },
    toTeachingresources() {
      this.$router.push("/coursewareresources");
    },
    toteachingachievements() {
      this.$router.push("/teachingachievements");
    },
    opennotesDeatils(row) {
      // console.log(row.id)
      this.$router.push({ name: "noticesdetail", params: { id: row.id } });
    },

    // 获取内容列表
    getList() {
      this.$http.post("/v1/api/newses/page", this.query).then((res) => {
        if (res.data.code == 0) {
          this.list = res.data.data.list;
          this.total = res.data.data.total;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    getList2() {
      this.$http.post("/v1/api/attachments/page", this.query2).then((res) => {
        if (res.data.code == 0) {
          let list = res.data.data.list;
          this.list2 = res.data.data.list;
          this.total2 = res.data.data.total;
          // console.log(this.list2);
          // list.forEach((v) => {
          //   this.imglist.push({
          //     id: v.id,
          //     src: "http://121.37.144.250:1010/v1/api/attachments/" + v.id,
          //   });
          // });
          for (let v = 0; v <= 4;v++) {
            this.imglist.push({
              id: list[v].id,
              buzId: list[v].buzId,
              src: "http://121.37.144.250:1010/v1/api/attachments/" + list[v].id,
            });
          }
          // this.imageUrl =
          //   "http://121.37.144.250:1010/v1/api/attachments/" + this.list2[0].id;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 监听 pageSize 改变的事件
    handleSizeChange(pageSize) {
      this.query.pageSize = pageSize;
      this.getList();
    },
    // 监听 page 改变的事件
    handleCurrentChange(page) {
      this.query.pageNum = page;
      this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
//成果展示模块
.AchievementDisplay_box {
  width: 750px;
  height: 190px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 645px;
  top: 1265px;
  transform: translate(-50%, -50%);
  > span {
    display: flex;
    padding-top: 12px;
    padding-left: 10px;
    font-size: 18px;
  }
}
.AchievementDisplay_box_orange {
  width: 70px;
  height: 3px;
  background-color: #fc6620;
  position: absolute;
  left: 45px;
  top: 45px;
  transform: translate(-50%, -50%);
}
.AchievementDisplay_box_blue {
  width: 725px;
  height: 1px;
  background-color: #106ab5;
  position: absolute;
  left: 373px;
  top: 46px;
  transform: translate(-50%, -50%);
}
.AchievementDisplay_box_more {
  width: 60px;
  height: 15px;
  background-color: #106ab5;
  position: absolute;
  left: 706px;
  top: 39px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > span {
    display: flex;
    // padding-top: 15px;
    padding-left: 5px;
    color: #fff;
    font-size: 1px;
  }
}
.img6_box{
  cursor: pointer;
}
.img_box {
  width: 730px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 375px;
  top: 120px;
  transform: translate(-50%, -50%);
}
</style>
